<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>CSS3动画</title>
		<style type="text/css">
			*{margin: 0;padding: 0;font-family: Georgia;color: #FFC012;}
			.div1 p{transform: scale(0,0);transition: all .8s ease-out;text-align: center;letter-spacing: -10px;}
			.div1 u{font-size: 220px;}
			.div2 p{transform: translateX(-50px);transition: all .8s ease-out;text-align: center;opacity: 0;}
			.div2 u{font-size: 38px;font-family: Times;}
			.div3{font-size: 150px;line-height: 150px;width: 300px;height: 300px;font-family: Microsoft JhengHei;position: relative;margin: 0 auto;}
			.div3::before{display: block;width: 0%;top: 50%;left: 0;margin-top: -1px;border-bottom: 1px solid #FFC012;content: '';position: absolute;transition: .8s;}
			.div3::after{display: block;height: 0%;left: 50%;top: 0;margin-left: -1px;border-left: 1px solid #FFC012;content: '';position: absolute;transition: .8s;}
			.div3 span{position: absolute;padding: 10px;transform: scale(0,0);}
			.div3 span:nth-child(1){right: 55%;bottom: 50%;transition: .8s .7s ease-out;transform-origin: right bottom;}
			.div3 span:nth-child(2){left: 50%;bottom: 50%;transition: .8s .9s ease-out;transform-origin: left bottom;}
			.div3 span:nth-child(3){right: 50%;top: 50%;transition: .8s 1.1s ease-out;transform-origin: right top;}
			.div3 span:nth-child(4){left: 50%;top: 50%;transition: .8s 1.3s ease-in-out;transform-origin: left top;}
		</style>
	</head>

	<body>
		<div class="div1">
			<p><span><u>2017</u></span></p>
		</div>
		<div class="div2">
			<p><span><u>OVERSEAS DISTRIBUTION</u></span></p>
		</div>
		<div class="div3">
			<span>G</span>
			<span>A</span>
			<span>M</span>
			<span>E</span>
		</div>
		
		
		<script type="text/javascript">
			var oP1 = document.getElementsByTagName("p")[0];
			var oP2 = document.getElementsByTagName("p")[1];
			var oDiv3 = document.getElementsByClassName("div3")[0];
			var aDiv3Span = oDiv3.getElementsByTagName("span");
			
			setTimeout(function(){
				oP1.style.transform = "scale(1,1)";
				oP2.style.opacity = "1";
				oP2.style.transform = "translateX(0)";
				document.styleSheets[0].addRule(".div3::before", "width: 100%");
				document.styleSheets[0].addRule(".div3::after", "height: 100%");
				for (var i = 0; i < aDiv3Span.length; i++) {
					aDiv3Span[i].style.transform = "scale(1,1)"
				}
			},1000);
		</script>
	</body>

</html>